<template>
  <div class="home">
    <Layout :style="{padding: '0 24px 24px 24px'}">
      <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>会员管理</BreadcrumbItem>
        <BreadcrumbItem>我的会员</BreadcrumbItem>
        <Button type="success" class="" @click="AddMember">注册会员</Button>
      </Breadcrumb>
      <Content :style="{padding: '24px 182px 24px 24px', minHeight: this.$h.GetContentBodyHeight()+'px', background: '#fff'}">
        <Table :loading="loading_" border  :columns="columns7" :data="data6" stripe></Table>
        <Page :total="total" :page-size="pagesize" @on-change="changpage" show-total/>

        <!--会员充值金额-->
        <Modal
          v-model="RechargeMoneyFlag"
          :title=RechargeName
          @on-ok="MemberRechargeMoney">
          <Input v-model="RechargeMoney" placeholder="请输入充值金额" style="width: 300px" number/>
        </Modal>
      </Content>
      <!--注册会员-->
      <Modal
        v-model="MemberFlag"
        title="注册会员"
        @on-ok="DetermineMemberAPI"
      >
        <Form :label-width="80">
          <FormItem label="会员账号">
            <Input v-model="MemberNumber" placeholder="会员账号" ></Input>
          </FormItem>
          <FormItem label="设置密码">
            <Input v-model="MemberPassword" placeholder="设置密码" number></Input>
          </FormItem>
          <FormItem label="设置金额">
            <Input v-model="MemberMoney" placeholder="设置金额(金额不能大于一百万)" number></Input>
          </FormItem>
        </Form>
      </Modal>


    </Layout>
  </div>
</template>
<script>

  export default {
    props: {},
    components: {},
    data() {
      return {
        MemberNumber: '', //会员账号
        MemberPassword: '',//会员密码
        MemberMoney: '',//会员金额
        MemberInfo: {},//临时储存会员信息
        MemberFlag: false,//注册会员提示框
        loading_: false,
        total: 0,//数据总条数
        pagesize: 10,//每页条数
        RechargeName: '',//充值用户名称
        RechargeMoneyFlag: false,//充值提示框
        RechargeMoney: '',//充值金额
        data6: [],//当页数据条数
        Alldata:[],//总条数
        columns7: [
          {
            title: '会员',
            key: 'businesses_name',
            width: 250,
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('strong', params.row.businesses_name)
              ]);
            }
          },

          {
            title: '消费资金',
            key: 'now_money',
            width: 150,
          },
          {
            title: '最近充值资金',
            key: 'lately_money',
            width: 150,
          },
          {
            title: '充值总资金',
            key: 'total_money',
            width: 150,
          },
          {
            title: '当前资金',
            key: 'total_money' - 'now_money',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('strong', params.row.total_money - params.row.now_money)
              ]);
            }
          },
          {
            title: '注册时间',
            key: 'created_at',
            width: 150,
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 200,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.UsersView(params.row)
                    }
                  }
                }, '查看详情'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.Recharge(params.index, params)
                    }
                  }
                }, '充值'),

                h('Button', {
                  props: {
                    type: params.row.status == 1 ? 'primary' : 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                }, params.row.status == 1 ? '解冻' : '冻结'),

              ]);
            }
          }
        ],

      }

    },
    methods: {
      UsersView(row){  //查看用户详情
        this.$store.commit('SetUserID',row);
        this.$router.push({
          path: '/Usersedlist'
        });
      },
      changpage(page){  //点击分页
        this.data6 = this.Alldata.slice((page - 1) * this.pagesize, page * this.pagesize)
      },
      Recharge(index, row) { //打开充值提示框
        this.RechargeMoneyFlag = true;
        this.RechargeName = '为' + row.row.businesses_name + '充值';
        this.MemberInfo = row.row;
        console.log(this.MemberInfo);
      },
      MemberRechargeMoney() {  //会员充值
        let reg = new RegExp("^[0-9]*$");
        if (!reg.test(this.RechargeMoney)) {
          this.$Message.info('请输入数字');
          return false;
        };
        this.http.post({
          'api': 'recharge',
          'data': {
            'uuid': this.MemberInfo.businesses_uuid,
            'money': this.RechargeMoney,
          },
        }).then((res) => {
          if (res.data.Response.code == 200) {
            this.ContentData();
            this.$Notice.success({
              title: '充值成功',
              desc: '充值金额为：￥' + res.data.Response.data.lately_money
            });
          }
        }, (err) => {
        })


      },
      AddMember() {//打开会员注册提示框
        this.MemberFlag = true;
      },
      DetermineMemberAPI() {//注册会员
        this.http.post({
          'api': 'regist',
          'data': {
            'name': this.MemberNumber,
            'password': this.MemberPassword,
            'money': this.MemberMoney,
          },
        }).then((res) => {
          if (res.data.Response.code == 200) {
            this.ContentData();
            this.$Notice.success({
              title: '注册成功',
              desc: '账号：' + res.data.Response.data.businesses_name + '--注册资金：' + res.data.Response.data.lately_money
            });
          }
        }, (err) => {
          // if (err) {
          //   // this.$h.Ed(err, this);
          // }
        })
      },
      remove(row) {
        // console.log(row);
        this.http.post({
          'api': 'freezing',
          'data': {
            'uuid': row.businesses_uuid,
          },
        }).then((res) => {
          if (res.data.Response.code == 200) {
            this.ContentData();
            this.$Notice.success({
              title: '操作成功',
            });
          }
        }, (err) => {

        })
      },

      ContentData() { //获取会员数据
        this.loading_ = true;
        this.http.post({
          'api': 'getbusinessitem',
          'data': {},
        }).then((res) => {
          this.loading_ = false;
          if (res.data.Response.code == 200) {
            // console.log(res.data.Response.data);
            this.Processingdata(res.data.Response.data)
          }
        }, (err) => {
          // if (err) {
          //   // this.$h.Ed(err, this);
          // }
        })
      },
      Processingdata(data) {
        this.Alldata = data;
        this.total=data.length;//数据总条数
        this.data6 = data.slice(0, this.pagesize)
      }
    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      this.ContentData();
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }
</style>
